@import '../../../styles/mixins';

.PlayerFrame {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--bg-3000-dark);

    .PlayerFrame__content {
        position: absolute;

        iframe {
            background-color: white;
            border: 0;
        }

        // Copied over from rrweb replay css
        .replayer-wrapper {
            position: relative;
        }

        .replayer-mouse {
            position: absolute;
            width: 20px;
            height: 20px;
            background-image: url('');
            background-repeat: no-repeat;
            background-position: center center;
            background-size: contain;
            border-color: transparent; /* otherwise we transition from black when .touch-device class is added */
            transition: left 0.05s linear, top 0.05s linear;
        }

        .replayer-mouse::after {
            display: inline-block;
            width: 20px;
            height: 20px;
            content: '';
            background: rgb(73 80 246);
            border-radius: 100%;
            opacity: 0.3;
            transform: translate(-50%, -50%);
        }

        .replayer-mouse.active::after {
            animation: PlayerFrame__click 0.2s ease-in-out 1;
        }

        .replayer-mouse.touch-device {
            width: 70px;
            height: 70px;
            margin-top: -37px;
            margin-left: -37px;
            background-image: none; /* there's no passive cursor on touch-only screens */
            border-color: rgb(73 80 246 / 0%);
            border-style: solid;
            border-width: 4px;
            border-radius: 100%;
            transition: left 0s linear, top 0s linear, border-color 0.2s ease-in-out;
        }

        .replayer-mouse.touch-device.touch-active {
            border-color: rgb(73 80 246 / 100%);
            transition: left 0.25s linear, top 0.25s linear, border-color 0.2s ease-in-out;
        }

        .replayer-mouse.touch-device::after {
            opacity: 0; /* there's no passive cursor on touch-only screens */
        }

        .replayer-mouse.touch-device.active::after {
            animation: PlayerFrame__touch-click 0.2s ease-in-out 1;
        }

        .replayer-mouse-tail {
            position: absolute;
            pointer-events: none;
        }

        @keyframes PlayerFrame__click {
            0% {
                width: 20px;
                height: 20px;
                opacity: 0.3;
            }

            50% {
                width: 10px;
                height: 10px;
                opacity: 0.5;
            }
        }

        @keyframes PlayerFrame__touch-click {
            0% {
                width: 20px;
                height: 20px;
                opacity: 0;
            }

            50% {
                width: 10px;
                height: 10px;
                opacity: 0.5;
            }
        }
    }
}
